<template>
  <div class="tab-container waybill-tab-container tab-fixed">
    <el-card shadow="never" class="margin-bottom">
      <el-row :gutter="6">
        <el-form
          ref="orderForm"
          :model="searchOrderData"
          :rules="rules"
          size="mini"
          label-width="60px"
        >
          <el-col :span="4">
            <el-form-item label="运单号" prop="waybillNos">
              <el-input
                v-model="searchOrderData.waybillNos"
                type="textarea"
                placeholder="请输入运单号"
                :autosize="{ minRows: 3, maxRows: 6 }"
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="4">
            <el-form-item label="仓库代码" prop="dispatchAddressCode">
              <el-input
                v-model="searchOrderData.dispatchAddressCode"
                placeholder="请输入仓库代码"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="4">
            <el-form-item label="派送方式" prop="trackNumber">
              <el-input
                v-model="searchOrderData.trackNumber"
                placeholder="请输入派送方式"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="4">
            <el-form-item label="当前轨迹" prop="status">
              <el-select
                v-model="searchOrderData.status"
                placeholder="当前轨迹"
                clearable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(k, v) in statusOptions"
                  :key="k"
                  :label="m(statusOptions[v])"
                  :value="parseInt(v)"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="2">
            <el-form-item label="">
              <el-button
                type="primary"
                icon="el-icon-search"
                size="mini"
                @click="searchOrinitPageData"
              >
                搜索
              </el-button>
            </el-form-item>
          </el-col>

          <el-col :span="2">
            <el-form-item label="">
              <el-button type="primary" size="mini" @click="reset">
                重置
              </el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
    </el-card>
    <el-card shadow="never" class="margin-bottom">
      <el-row :gutter="2">
        <el-form
          ref="remarkForm"
          :model="saveTraceData"
          :rules="rules"
          size="mini"
          label-width="100px"
        >
          <el-col :span="4" style="margin-left:40px;">
            <div class="block">
              <span class="demonstration"></span>
              <el-date-picker
                label="分配日期"
                size="mini"
                v-model="statuData"
                value-format="yyyy-MM-dd"
                align="right"
                type="date"
                placeholder="选择日期"
                :picker-options="pickerOptions"
              >
              </el-date-picker>
            </div>
          </el-col>
          <el-col :span="4">
            <el-button type="primary" size="mini" @click="batchAllocationTrace">
              确定
            </el-button>
          </el-col>
        </el-form>
      </el-row>
    </el-card>

    <el-card shadow="never">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="30" :selectable="selectable">
        </el-table-column>
        <el-table-column prop="waybillNo" label="运单号" width="180">
        </el-table-column>
        <el-table-column prop="referenceNo" label="参考号" width="180">
        </el-table-column>
        <el-table-column prop="waybillSingleId" label="所属分单">
        </el-table-column>
        <el-table-column
          prop="inStockChannel"
          label="所属合单"
        ></el-table-column>
        <el-table-column prop="customerTotalPackages" label="件数" width="180">
        </el-table-column>
        <el-table-column
          prop="dispatchAddressCode"
          label="仓库代码"
          width="180"
        >
        </el-table-column>
        <el-table-column prop="trackNumber" label="派送方式" width="180">
          <template slot-scope="scope">
            <span v-if="scope.row.trackNumber === null">卡车派送</span>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="当前轨迹" width="180">
          <template slot-scope="scope">
            <span v-if="scope.row.status === 10">待确认</span>
            <span v-if="scope.row.status === 20">待交寄</span>
            <span v-if="scope.row.status === 30">待入库</span>
            <span v-if="scope.row.status === 40">待出库</span>
            <span v-if="scope.row.status === 50">待上网</span>
            <span v-if="scope.row.status === 60">待报关</span>
            <span v-if="scope.row.status === 65">报关检查中</span>
            <span v-if="scope.row.status === 70">待报关放行</span>
            <span v-if="scope.row.status === 80">待离港</span>
            <span v-if="scope.row.status === 90">待到港</span>
            <span v-if="scope.row.status === 100">待清关</span>
            <span v-if="scope.row.status === 105">清关查验中</span>
            <span v-if="scope.row.status === 110">待清关放行</span>
            <span v-if="scope.row.status === 120">待到仓</span>
            <span v-if="scope.row.status === 130">待派送</span>
            <span v-if="scope.row.status === 135">部分签收</span>
            <span v-if="scope.row.status === 140">待签收</span>
            <span v-if="scope.row.status === 888">待锁单</span>
            <span v-if="scope.row.status === 999">已完成</span>
          </template>
        </el-table-column>
        <el-table-column prop="statustime" label="上一个轨迹时间" width="180">
          <template slot-scope="scope">
            <span v-if="scope.row.status >= 105 && scope.row.status <= 140">
              <span
                v-if="
                  scope.row.status === 105 && scope.row.arrivalPortTime != ''
                "
              >
                <span v-if="scope.row.arrivalPortTime != ''">
                  {{ scope.row.arrivalPortTime }}
                </span>
              </span>
              <span
                v-else-if="
                  scope.row.status === 110 && scope.row.clearanceTime != ''
                "
              >
                <span v-if="scope.row.arrivalPortTime != ''">
                  {{ scope.row.clearanceTime }}
                </span>
              </span>
              <span
                v-else-if="
                  scope.row.status === 120 &&
                    scope.row.clearanceReleaseTime != ''
                "
              >
                <span v-if="scope.row.arrivalPortTime != ''">
                  {{ scope.row.clearanceReleaseTime }}
                </span>
              </span>
              <span
                v-else-if="
                  scope.row.status === 130 && scope.row.arrivalStockTime != ''
                "
              >
                <span v-if="scope.row.arrivalPortTime != ''">
                  {{ scope.row.arrivalStockTime }}
                </span>
              </span>
              <span
                v-else-if="
                  scope.row.status === 140 && scope.row.arrivalPortTime != ''
                "
              >
                <span v-if="scope.row.arrivalPortTime != ''">
                  {{ scope.row.dispatchTime }}
                </span>
              </span>
            </span>
          </template>
        </el-table-column>
      </el-table>
      <!-- </el-table> -->
    </el-card>
  </div>
</template>
<script>
import { ajax } from "@/store/yg/common/utils";
import * as constant from "@/store/yg/common/constant";
import axios from "axios";
import { m } from "@/store/yg/common/local";

export default {
  props: [],
  data() {
    return {
      selectable(row) {
        if (row.status > 140 || row.status < 105) {
          return 0;
        } else {
          return 1;
        }
      },
      rules: {},
      pickerOptions: {
        disabledDate(time) {},
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            }
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            }
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            }
          }
        ]
      },
      //选中的所以的数据都在这里面
      //批量操作选中
      multipleSelection: [],
      //选择的所有的id 数组
      selectWaybillIds: [],
      //选择的状态节点
      selelctStatus: "",
      userOptions: {},
      inStockChannelOptions: {},
      statusOptions: {},
      tableData: [
        {
          waybillId: "",
          waybillNo: "",
          referenceNo: "",
          waybillSingleId: "",
          waybillMergeId: "",
          customerTotalPackages: "",
          fbaCode: "",
          trackNumber: "",
          status: "",
          statustime: ""
        }
      ],
      searchOrderData: {
        waybillNos: "",
        dispatchAddressCode: "",
        trackNumber: "",
        status: ""
      },
      //节点时间
      statuData: "",
      saveTraceData: {
        //分配的时间
        statuData: "",
        //分配的状态
        status: "",
        //分配的订单
        waybillIdStrs: ""
      },
      receiveTypeOptions: [
        {
          label: "销售",
          value: 0
        },
        {
          label: "客服",
          value: 1
        }
      ],
      synTraceOptions: [
        {
          label: "是",
          value: 1
        },
        {
          label: "否",
          value: 0
        }
      ],
      urgencytypeOptions: [
        {
          label: "红",
          value: 0
        },
        {
          label: "黄",
          value: 1
        },
        {
          label: "灰",
          value: 2
        }
      ]
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.initUserOptions("userSource");
    this.initChannelOptions("customerChannelSource");
    this.initStatusOptions("waybillStatusSource");
    this.searchOrinitPageData();
  },
  methods: {
    //点击按钮触发的事件
    handleSelectionChange(val) {
      this.selectWaybillIds = [];
      //判断选择的节点 是不是同样的节点
      var selelctStatus;
      for (let i = 0; i < val.length; i++) {
        const id = val[i].id;
        var everyStatus = val[i].status;
        if (selelctStatus) {
          if (everyStatus != selelctStatus) {
            this.$message.error("有不同节点的单号,请重新勾选");
            this.$refs.multipleTable.clearSelection();
            return;
          }
        } else {
          selelctStatus = everyStatus;
        }
        this.selectWaybillIds.push(id);
      }
      this.selelctStatus = selelctStatus;
      this.multipleSelection = val;
    },
    m(key) {
      return m(key);
    },
    //保存分配的轨迹的操作
    batchAllocationTrace() {
      if (
        null == this.selelctStatus ||
        null == this.selectWaybillIds ||
        "" == this.selelctStatus ||
        "" == this.selectWaybillIds
      ) {
        this.$message.error("未选择任何数据");
        return;
      }
      if (null == this.statuData || "" == this.statuData) {
        this.$message.error("未选择分配时间");
        return;
      }
      //装车计划 订单号
      this.saveTraceData.waybillId = this.$route.query.waybillId;
      //相同的订单状态
      this.saveTraceData.status = this.selelctStatus;
      //选择的 订单 id
      var waybillIdStrs = "";
      for (let i = 0; i < this.selectWaybillIds.length; i++) {
        waybillIdStrs = waybillIdStrs + this.selectWaybillIds[i] + ",";
      }
      this.saveTraceData.waybillIdStrs = waybillIdStrs;
      //选择时间
      this.saveTraceData.statuData = this.statuData;
      ajax("batchAllocationTrace", this.saveTraceData).then(
        res => {
          if (res.code != 200) {
            if (res.message) {
              this.$message.error(res.message);
            } else {
              this.$message.error("程序异常");
            }
          } else {
            this.$message.success("分配成功");
          }
        },
        error => {
          this.$message.error("程序异常");
        }
      );
    },
    reset() {
      this.searchOrderData = {};
      this.searchOrinitPageData();
    },
    //初始化数据的方法 查询数据的方法
    searchOrinitPageData() {
      this.searchOrderData.waybillId = this.$route.query.pid;
      ajax("toLoadPlanAllocationTrace", this.searchOrderData).then(
        res => {
          if (res.code != 200) {
            if (res.message) {
              this.$message.error(res.message);
            } else {
              this.$message.error("程序异常");
            }
          } else {
            this.tableData = res.data;
          }
        },
        error => {
          this.$message.error("程序异常");
        }
      );
    },
    initUserOptions(bean) {
      var uri = "/api/entry/source?bean=" + bean;
      axios.post(constant.API_SERVER + uri).then(
        response => {
          this.userOptions = response.data;
        },
        error => {
          console.info(error);
        }
      );
    },
    initChannelOptions(bean) {
      var uri = "/api/entry/source?bean=" + bean;
      axios.post(constant.API_SERVER + uri).then(
        response => {
          this.inStockChannelOptions = response.data;
        },
        error => {
          console.info(error);
        }
      );
    },
    initStatusOptions(bean) {
      var uri = "/api/entry/source?bean=" + bean;
      axios.post(constant.API_SERVER + uri).then(
        response => {
          this.statusOptions = response.data;
        },
        error => {
          console.info(error);
        }
      );
    }
  }
};
</script>
<style lang="scss" scoped>
.title-icon {
  display: inline-block;
  width: 120px;
}
</style>

<style scoped>
/deep/ .el-tabs__item.is-disabled {
  color: #51abd1;
}
</style>
